<template>
  <div class="dashboard-container">
    <div class="app-container">

      <!--卡片 -->
      <el-card class="box-card">
        <!-- 靠右的按钮 -->
        <div class="boxNav">
          <el-button type="primary" @click="add">添加页面</el-button>
          <div> <input v-model="searchList.title_contains" type="text" class="search_Inp" placeholder="请输入关键字"><button class="search" @click="screen">筛选</button></div>
        </div>
        <!-- 分割线 -->
        <hr class="hr">
        <!-- 表格开始-->
        <el-table :data="propertyList" border style="width: 100%">
          <el-table-column prop="title" label="标题" style="width:33%" />
          <el-table-column prop="content" label="内容" style="width:33%">
            <template #default="{row}">
              <div v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <!--  <template #default="{row}"> -->
            <template #default="{row}">
              <!--v-if="row.type=='1'   规定等级设置添加，子级不能添加  -->
              <el-button type="primary" @click="redact(row.id)">编辑</el-button>
              <el-button type="danger" @click="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
          <!-- 表格结束 -->
        </el-table>

        <div class="block">
          <el-pagination
            :current-page.sync="currentPage"
            layout="prev, pager, next"
            :total="total"
            :page-size="searchList._limit"
            @current-change="currentChange"
          />
        </div>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog :title="caption" :visible="isShowDialog" type="formData.type" @close="btnNo">
        <!-- 表单 -->
        <!--  @close="" -->
        <el-form ref="perForm" :rules="rules" label-width="120px" :model="formData">
          <el-form-item label="标题" prop="title">
            <el-input v-model="formData.title" style="width:90%" />
          </el-form-item>
          <!-- 富文本框 -->
          <el-form-item label="内容" prop="contents">
            <VueEditor v-model="formData.content" style="width:90%;height:200px" />
          </el-form-item>

        </el-form>
        <el-row slot="footer" type="flex" justify="center" class="el_dialog_footer">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="btnOk">确定</el-button>
            <el-button size="small" @click="btnNo">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 弹窗结束 -->
    </div>
  </div>
</template>

<script>
import { getList, DelList, AddList, editorList, redactList, Search, CountList }
from '@/api/page'
import { VueEditor } from 'vue2-editor'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      currentPage: 1,
      // 富文本内容
      content: '',
      page: 0,
      // 每页条数
      // pageSize: 2,
      // 总条数页数
      total: 0,
      // 搜索结果放置处
      // 搜索
      searchList: {
        _limit: 2,
        _start: 0,
        title_contains: ''
      },
      // 标题名，自己手动输入修改
      caption: '',
      propertyList: [],
      // 表单
      formData: {
        title: '',
        content: '',
        type: 1
      },
      isShowDialog: false,
      // 富文本
      // 效验
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        contents: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    this.CountList()
  },
  methods: {
    async getList() {
      // console.log(1111)
      const { data } = await getList(this.searchList)
      this.propertyList = data
    },

    // 删除
    async del(id) {
      // console.log(id)
      await this.$confirm('是否确定删除')
      // 删除请求
      await DelList(id)
      // 当删光当前页面数据的时候返回上一页
      if (this.propertyList.length === 1 && this.page > 1) {
        // 当前页减1
        this.page = this.page - 1
        // 重新计算当前页
        this.searchList._start = this.page * this.searchList._limit - 2
        // 总条数减2
        this.total = this.total - 2
        // console.log(this.page)
      }
      // 重新渲染
      this.getList()
    },
    // 增加
    add() {
      this.caption = '页面新增'
      this.isShowDialog = true
    },
    // 页面新增确定
    async btnOk() {
      // console.log(this.formData.title)
      // ===========================有点难度的点==============================
      // 请求  有id就是编辑 没有id就是添加
      if (this.formData.id) {
        if (this.formData.title.trim() === '' || this.formData.content.trim() === '') {
          this.$confirm('内容不能为空')
          return
        }
        await redactList(this.formData)
        await this.$message.success('编辑完成')
      } else {
        // 因为新增了所以要增加数据总量
        // 内容不能为空格和不能为空
        if (this.formData.title.trim() === '' || this.formData.content.trim() === '') {
          this.$confirm('内容不能为空')
          return
        }
        await AddList(this.formData)
        // 重新增加翻页数量
        const { data } = await CountList()
        // ====================================================================
        await this.$message.success('新增完成')
        this.total = data
      }
      console.log(173, this.searchList.title_contains)
      // 搜索框有内容时添加新增不会改变原有页数
      if (this.searchList.title_contains.length !== 0) {
        this.searchList._limit = -1
        this.searchList._start = 0
        const { data } = await Search(this.searchList)
        console.log(178, data)
        this.searchList._limit = 2
        this.total = data.length
        this.getList()
      }

      // 关闭弹窗
      this.isShowDialog = false
      // 刷新
      this.getList()
    },
    // 关闭弹窗
    async btnNo() {
      // 标题内容清空
      this.formData = {
        title: '',
        content: ''
      }

      this.isShowDialog = false
    },

    // 编辑
    async redact(id) {
      this.formData.type = 2
      // 手动判断不等于就修改弹窗里面的内容
      if (this.formData.type !== 1) {
        // 弹窗
        this.isShowDialog = true
        // 修改标题
        this.caption = '页面编辑'
        // 回显
        // await this.getList()
        const { data } = await editorList(id)
        this.formData = data
      }
    },
    // 筛选
    async  screen() {
      this.currentPage = 1
      const res = await CountList({ ...this.searchList, _start: 0, _limit: 2 })
      this.total = res.data
      const { data } = await getList({ ...this.searchList, _start: 0, _limit: 2 })
      this.propertyList = data

      // 判断搜索框没有内容就显示全部
      if (this.searchList.title_contains.length === 0) {
        const { data } = await getList({ ...this.searchList, _start: 0, _limit: 2 })
        this.propertyList = data
        // this.getList()
      }
    },
    // 获取数据总数量
    async CountList() {
      const { data } = await CountList(this.searchList)
      this.total = data
    },
    // 点击页数改变页面
    currentChange(newPage) {
      // newPage * this.searchList._limit - 2  当前页 * 每页限定2条 -2
      this.page = newPage
      this.searchList._start = this.page * this.searchList._limit - 2
      this.getList()
      // console.log(newpage);
    }

  }

}
</script>

<style >
.boxNav{
  display: flex;
  justify-content: space-between;
}
.search{
  width: 70px;
  height: 35px;
    border: 1px solid #e5e7ec;
}
.search_Inp{
  width: 400px;
  height: 35px;
  border: 1px solid #e5e7ec;
  font-size: 14px;
  text-indent: 15px;
}
.hr{
  margin-top: 40px;
  margin-bottom: 20px;
  height: 1px;
  border-top: 1px solid #e5e7ec;
  border-bottom: #fff;
  border-left: #fff;
  border-right: #fff;
}
.el_dialog_footer{
  margin-top: 50px;
}
.block{
  margin-left: 400px;
}
</style>

